<template>
  <div>
    <el-dialog width="60%" :visible.sync="dialogVisible" @close="onClose" :title="title">
      <el-form ref="elForm" :model="formData" :rules="rules" size="medium" label-width="110px"
               label-position="left">



        <el-form-item label="产出层级" prop="materialLevel">
          <el-input-number v-model="formData.materialLevel"  :min="1" :max="100" label="请输入产出该材料所需的层级（正整数）"></el-input-number>
        </el-form-item>
        <el-form-item >
          <el-button type="primary" @click="saveList">新增</el-button>

        </el-form-item>

        <div v-for="(item,index) in formData.list" :key="index" class="itemStyle">
          <el-form-item label="合成材料名称" >
            <el-select v-model="item.materialId" placeholder="请选择" @change="selectChange(index,$event)">
              <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value">
              </el-option>
            </el-select>
          </el-form-item>
          <div style="width: 20px"></div>
          <el-form-item label="产出概率" >
            <el-input-number v-model="item.probability"  :min="0.0001" :max="100" label="请输入产出概率"></el-input-number>
          </el-form-item>
          <div style="margin-left: 10px">
            <el-button type="danger" v-if="formData.list.length>1" @click="removeIndex(index)">删除</el-button>
          </div>
        </div>
      </el-form>
      <div slot="footer">
        <el-button @click="close">取消</el-button>
        <el-button type="primary" @click="handleConfirm">确定</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>

import {syntheticList,climGameConfigUpdate} from "@/api/game/game"

export default {
  data() {
    return {
      dialogVisible: false,
      title: '编辑',
      formData: {
        list: [
          {
            materialId: undefined,
            materialName: undefined,
            probability: undefined
          }
        ],
        materialLevel: 1
      },
      rules: {
        materialLevel:[
          {
            required: true,
            message: '请输入产出层级',
            trigger: 'blur'
          }
        ],
      },
      id: null,
      theticList:[],
      options: [],

    }
  },

  methods: {
    removeIndex(index){
      this.formData.list.splice(index,1)
    },
    selectChange(index,$event) {
      console.log(index,$event)
      let value = this.options.filter(item=>item.value==$event)
      this.formData.list[index].materialName=value[0].label
      console.log('value:',value)
      console.log('list:',this.formData.list)
    },
    saveList(){
      this.formData.list.push({
        materialId: undefined,
        materialName: undefined,
        probability: undefined})
    },
    async getSyntheticList(){
      let res = await syntheticList()
      console.log('data:',res.data)
      this.options = res.data.map(item => {
        return{
          value: item.materialId,
          label: item.materialName
        }
      })
    },
    // 弹窗
    async onOpen(data) {
      this.getSyntheticList()
      if (data) {
        this.id = true
        this.title = "编辑"
        this.formData = JSON.parse(decodeURIComponent(data));
      } else {
        this.id = false
        this.title = "新增"
      }
      this.dialogVisible = true
    },
    onClose() {
      this.dialogVisible = false
      this.$refs['elForm'].resetFields()
      this.formData.list= [
        {
          materialId: undefined,
          materialName: undefined,
          probability: undefined
        }
      ]
      this.formData.materialLevel=1
    },
    close() {
      this.dialogVisible = false
    },
    // 提交数据
    handleConfirm() {
      this.$refs['elForm'].validate(async valid => {
        this.loading = true
        if (!valid) {
          // 如果验证不通过，则阻止后续代码执行
          this.loading = false;
          return;
        }
        if (this.id) {
          try {
            // 编辑
            await climGameConfigUpdate([this.formData])
            this.$message({
              message: '修改成功',
              type: 'success'
            });
            this.$emit('success')
            this.onClose()
            this.loading = false
          } catch (error) {
            this.loading = false
          }
        } else {
          try {
            // 新增
            await climGameConfigUpdate([this.formData])
            this.$message({
              message: '新增成功',
              type: 'success'
            });
            this.$emit('success')
            this.onClose()
            this.loading = false
          } catch (error) {
            this.loading = false
          }
        }
      })
    },
  }
}

</script>
<style scoped>
.itemStyle{
  height: 50px;
  display: flex;
}
.el-upload__tip {
  line-height: 1.2;
}

</style>
